import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import {
  Button,
  Card,
  CardHeader,
  Input,
  Text,
  Title1,
  makeStyles,
  tokens,
  Label,
  MessageBar
} from '@fluentui/react-components'
import { useAuthStore } from '../store/authStore'

const useStyles = makeStyles({
  container: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    width: '100vw',
    backgroundColor: tokens.colorNeutralBackground2,
  },
  loginCard: {
    width: '480px',
    minHeight: '520px',
    padding: '48px',
    boxShadow: tokens.shadow16,
  },
  form: {
    display: 'flex',
    flexDirection: 'column',
    gap: '20px',
  },
  title: {
    textAlign: 'center',
    marginBottom: '16px',
    fontSize: '32px',
    fontWeight: '600',
    color: tokens.colorBrandForeground1,
  },
  subtitle: {
    textAlign: 'center',
    marginBottom: '32px',
    color: tokens.colorNeutralForeground2,
    fontSize: '16px',
  },
  field: {
    display: 'flex',
    flexDirection: 'column',
    gap: '8px',
  },
  input: {
    fontSize: '16px',
  },
  loginButton: {
    marginTop: '24px',
    minHeight: '48px',
    fontSize: '16px',
  },
  hint: {
    marginTop: '20px',
  },
  hintText: {
    textAlign: 'center',
    color: tokens.colorNeutralForeground3,
  }
})

const Login = () => {
  const classes = useStyles()
  const navigate = useNavigate()
  const login = useAuthStore(state => state.login)
  
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [showHint, setShowHint] = useState(false)

  const handleLogin = () => {
    // 假登录逻辑 - 任意输入都可以登录
    const user = username || 'admin'
    login(user)
    setShowHint(true)
    
    // 延迟跳转以显示提示信息
    setTimeout(() => {
      navigate('/dashboard')
    }, 1500)
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    handleLogin()
  }

  return (
    <div className={classes.container}>
      <Card className={classes.loginCard}>
        <CardHeader>
          <div>
            <Title1 className={classes.title}>SPAM3-GO</Title1>
            <Text className={classes.subtitle}>爬虫管理系统</Text>
          </div>
        </CardHeader>
        
        <form onSubmit={handleSubmit} className={classes.form}>
          <div className={classes.field}>
            <Label htmlFor="username" size="large">用户名</Label>
            <Input
              id="username"
              placeholder="admin"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              className={classes.input}
              size="large"
            />
          </div>
          
          <div className={classes.field}>
            <Label htmlFor="password" size="large">密码</Label>
            <Input
              id="password"
              type="password"
              placeholder="123456"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className={classes.input}
              size="large"
            />
          </div>
          
          <Button 
            type="submit"
            appearance="primary" 
            className={classes.loginButton}
            size="large"
          >
            登录
          </Button>
        </form>

        {showHint && (
          <div className={classes.hint}>
            <MessageBar intent="success">
              登录成功！默认账号：admin/123456，正在跳转...
            </MessageBar>
          </div>
        )}
        
        <div className={classes.hint}>
          <Text size={300} className={classes.hintText}>
            提示：输入任意用户名和密码均可登录
          </Text>
        </div>
      </Card>
    </div>
  )
}

export default Login
